<template>
  <div>
    <div v-if="isShow && !isView">
      <a-button
        type="primary"
        class="mr_10"
        @click="componentName = 'EditComponents'"
        >编辑组件导入</a-button
      >
      <a-button type="primary" class="mr_10" @click="handleView"
        >查看组件导入</a-button
      >
      <a-button
        type="primary"
        class="mr_10"
        @click="componentName = 'TrainingReport'"
        >中台培训报告导入</a-button
      >
      <a-button
        type="primary"
        class="mr_10"
        @click="componentName = 'ProjectPlanReport'"
        >培训报告页</a-button
      >
      <a-button type="primary" @click="isShow = false"
        >隐藏组件导入按钮</a-button
      >
    </div>
    <div>
      <component :is="componentName" v-if="!isView"></component>
      <ViewComponents v-if="isView" @closeView="isView = false" />
    </div>
  </div>
</template>
<script>
import EditComponents from "./EditComponents.vue";
import ViewComponents from "./ViewComponents.vue";
import TrainingReport from "./TrainingReport.vue";
import ProjectPlanReport from "./ProjectPlanReport.vue";

export default {
  data() {
    return {
      isView: false,
      isShow: true,
      componentName: EditComponents,
    };
  },
  methods: {
    handleView() {
      this.isView = true;
    },
  },
  components: {
    ViewComponents,
    EditComponents,
    TrainingReport,
    ProjectPlanReport,
  },
};
</script>
<style lang="less" scoped>
.mr_10 {
  margin-right: 10px;
}
</style>
